import Animation from '../base/animation';
import { SCREEN_WIDTH, SCREEN_HEIGHT, CHESS_HEIGHT, CHESS_WIDTH, FIGHTER_SPACE, FIGHTERS_PADDING } from '../render';


export default class ChessBase extends Animation {
    constructor(imgSrc, description) {
        super(imgSrc, CHESS_WIDTH, CHESS_HEIGHT);

        // 效果描述
        this.description = description;

        // 初始化坐标
        this.init();

        // 初始化事件监听
        this.initEvent();
    }

    init() {
        // todo 初始化，放入备战席
        this.x = SCREEN_WIDTH / 2 - this.width / 2;
        this.y = SCREEN_HEIGHT - this.height - 30;

        // 用于在手指移动的时候标识手指是否已经在棋子上了
        this.touched = false;

        this.isActive = true;
        this.visible = true;
    }

    /**
     * 判断手指是否在棋子上
     * @param {Number} x: 手指的X轴坐标
     * @param {Number} y: 手指的Y轴坐标
     * @return {Boolean}: 用于标识手指是否在棋子上的布尔值
     */
    checkIsFingerOnChess(x, y) {
        const deviation = 30;
        return (
            x >= this.x - deviation &&
            y >= this.y - deviation &&
            x <= this.x + this.width + deviation &&
            y <= this.y + this.height + deviation
        );
    }

    /**
     * 根据手指的位置设置棋子的位置
     * 保证手指处于棋子中间
     * 同时限定棋子的活动范围限制在屏幕中
     */
    setChessPosAcrossFingerPosZ(x, y) {
        const disX = Math.max(
            0,
            Math.min(x - this.width / 2, SCREEN_WIDTH - this.width)
        );
        const disY = Math.max(
            0,
            Math.min(y - this.height / 2, SCREEN_HEIGHT - this.height)
        );

        this.x = disX;
        this.y = disY;
    }

    /**
     * 棋子响应手指的触摸事件
     * 改变战机的位置
     */
    initEvent() {
        wx.onTouchStart((e) => {
            const { clientX: x, clientY: y } = e.touches[0];

            if (GameGlobal.databus.isGameOver) {
                return;
            }
            if (this.checkIsFingerOnChess(x, y)) {
                this.touched = true;
                this.setChessPosAcrossFingerPosZ(x, y);
            }
        });

        wx.onTouchMove((e) => {
            const { clientX: x, clientY: y } = e.touches[0];

            if (GameGlobal.databus.isGameOver) {
                return;
            }
            if (this.touched) {
                this.setChessPosAcrossFingerPosZ(x, y);
            }
        });

        wx.onTouchEnd((e) => {
            //Todo 检测落点是否有其他棋子，如果有，交换他们的位置
            this.touched = false;
        });

        wx.onTouchCancel((e) => {
            this.touched = false;
        });
    }

    update() {
        if (GameGlobal.databus.isGameOver) {
            return;
        }
    }

    // 售出
    destroy() {
        this.isActive = false;
        this.playAnimation();
        // GameGlobal.musicManager.playExplosion(); // 播放出售音效
        wx.vibrateShort({
            type: 'medium'
        }); // 震动
    }


    render(ctx, index) {
        if (!this.visible) return;
        
        this.x = FIGHTERS_PADDING + (CHESS_WIDTH + FIGHTER_SPACE) * index;
        this.y = SCREEN_HEIGHT - CHESS_HEIGHT - FIGHTER_SPACE / 2;
        // 根据 index 计算备战席坐标，左上3个，右上3个，左下3个，右下3个，中间2个
        // switch (index) {
        //     case 0:
        //     case 1:
        //     case 2:
        //         this.y = SCREEN_HEIGHT - CHESS_HEIGHT * 2 - FIGHTER_SPACE;
        //         this.x = FIGHTERS_PADDING + (CHESS_WIDTH + FIGHTER_SPACE) * index;
        //         break;
        //     case 3:
        //         this.x = SCREEN_WIDTH - FIGHTERS_PADDING - CHESS_WIDTH * 3 - FIGHTER_SPACE * 2;
        //     case 4:
        //         this.x = SCREEN_WIDTH - FIGHTERS_PADDING - CHESS_WIDTH * 2 - FIGHTER_SPACE * 1;
        //     case 5:
        //         this.y = SCREEN_HEIGHT - CHESS_HEIGHT * 2 - FIGHTER_SPACE;
        //         this.x = SCREEN_WIDTH - FIGHTERS_PADDING - CHESS_WIDTH;
        //         break;
        //     case 6:
        //     case 7:
        //     case 8:
        //         this.y = SCREEN_HEIGHT - CHESS_HEIGHT;
        //         this.x = FIGHTERS_PADDING + (CHESS_WIDTH + FIGHTER_SPACE) * (index - 6);
        //         break;
        //     case 9:
        //     case 10:
        //     case 11:
        //         this.y = SCREEN_HEIGHT - CHESS_HEIGHT;
        //         this.x = SCREEN_WIDTH - FIGHTERS_PADDING - CHESS_WIDTH * (index - 8) - FIGHTER_SPACE * (index - 9);
        //         break;
        //     case 12:
        //         this.x = SCREEN_WIDTH / 2 - (FIGHTER_SPACE / 2 + CHESS_WIDTH);
        //         this.y = SCREEN_HEIGHT - (CHESS_HEIGHT * 2 + FIGHTER_SPACE) / 2;
        //     case 13:
        //         this.x = SCREEN_WIDTH / 2 + (FIGHTER_SPACE / 2);
        //         this.y = SCREEN_HEIGHT - (CHESS_HEIGHT * 2 + FIGHTER_SPACE) / 2;
        //         break;
        // }
        ctx.drawImage(this.img, this.x, this.y, this.width, this.height);
    }
}